<template>
  <div class="fixed-box">
    <!--
      具名插槽在组件调用的时候需要用#name指定插入的内容
    -->
    <slot name="fixed"></slot>
    <!-- 具名插槽的使用：<temmplate>#fixed插入的内容</template> -->
    

  </div>

  <div class="box">
    <div>左</div>
    <div>
      <!--不写名称的slot默认插槽，可以不写名称，但是要写slot-scope
        插槽的作用是将调用组件的地方编写要插入组件对应位置的内容
      -->
      <slot></slot>
      <el-button @click="myclick">触发事件的按钮</el-button>
    </div>
    <div>右</div>
  </div>
  <div>
    {{ myprop }}
  </div>

</template>
<script setup>
  import { ref } from 'vue';
//给组件定义属性
  defineProps(['myprop']);
  //给组件定义事件
  const emit = defineEmits(['myevent']);
  const myclick = () => {
    console.log('触发了事件');
    //参数
    emit('myevent', '参数');
  };
div

  </script>
  <style scoped >
  .box {
    display: flex;
    justify-content: space-between;
  }
  .fixed-box {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
  }
</style>;